<template>
  <!-- 接口平台开通弹窗  -->
  <el-dialog
    class="pick-dialog"
    title="服务开通"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    append-to-body
    width="660px"
  >
    <div class="form-box">
      <el-descriptions :labelStyle="{width:'100px'}" title="开通信息" border :column='1'>
          <el-descriptions-item label="接口名称">{{ruleForm.businessName}}</el-descriptions-item>
          <el-descriptions-item label="可对接游戏">{{ruleForm.gameNames}}</el-descriptions-item>
          <el-descriptions-item label="开通时长">一个月（首次开通默认一个月，续费请到“增值服务”模块）</el-descriptions-item>
          <el-descriptions-item label="所需虞豆">{{ruleForm.cost}}</el-descriptions-item>
          <el-descriptions-item label="当前虞豆">
            {{userInfo.campNumber}}
          </el-descriptions-item>
          <el-descriptions-item label="自动续费">
            <el-switch
                v-model="ruleForm.isAuto"
                :active-value="1"
                :inactive-value="2"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch>
          </el-descriptions-item>
          <!-- <el-switch
                v-model="form.isAuto"
                :active-value="1"
                :inactive-value="2"
                active-color="#13ce66"
                inactive-color="#ff4949">
              </el-switch> -->
      </el-descriptions>
      <div class="center">
        <el-button @click="close('ruleForm')">取消</el-button>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
          :loading="loading"
          >确认开通</el-button
        >
      </div>
      <contactServer ref="contactServer" ></contactServer>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import moneyApi from "@/api/financeCenter/myMoney";
import valueAddedServices from '@/api/shanghuduan/valueAddedServices'
import contactServer from "./contactServer.vue"
export default {
  name: "",
  components:{contactServer},
  computed: {
    ...mapGetters(["userInfo"]),
  },
  data() {
    return {
      dialogVisible: false,
      loading: false,
      type:'',
      ruleForm: {
        type: "2",
        businessId: "",
        businessName: "",
        openMonth: "1",
        isAuto: "",
        autoMonth:'3',
        activityId:'',
        cost:'',
        isFirst:1
      },
      rules: {
        
      },
      from: "", //来源
      activeInfo:'',
      monthList:[],
      activeIndex:0
    };
  },
  created() {
    
  },
  methods: {
    open(item) {
      //console.log("%c Line:102 🍯 item", "color:#42b983", item);
      this.loading = false;
      this.ruleForm = {
        type: 2,
        businessId: item.id,
        businessName: item.name,
        openMonth: "1",
        isAuto: 1,
        autoMonth:3,
        activityId:'',
        cost:'',
        isFirst:1,
        gameNames:item.gameNames
      };
      this.activitySettingsGetByType()
      this.dialogVisible = true;
    },

    // 获取活动信息
    activitySettingsGetByType(){
      moneyApi.activitySettingsGetByType({
        type:3//1表示虞豆充值 2表示增值服务功能配置的活动 包括竞价回收 3 接口平台配置的活动 
      }).then(res=>{
        if(res.code==200){
          // 将/n换成<br/>
          let data = res.data
          this.des =  data.remark.replace(/\n/g, '<br/>')
          this.activeInfo = data
          this.monthList = JSON.parse(data.rule)
          this.kuaijieClick(this.monthList,0)
        }
      })
    },
    kuaijieClick(item, i) {
      //console.log("%c Line:122 🥖 item", "color:#b03734", item);
      // this.activeIndex = i;
      // this.ruleForm.openMonth = item.month;
      this.ruleForm.cost = item[this.ruleForm.businessId]?item[this.ruleForm.businessId].firstPointsNum:item[999999].firstPointsNum;
      this.ruleForm.activityId = this.activeInfo.id;
    },
    submitForm(){
      if(this.ruleForm.openMonth&&this.ruleForm.cost&&this.ruleForm.activityId){
        valueAddedServices.openValueAddedServices(this.ruleForm).then(res=>{
        
            this.$store.dispatch("getShopInfo")
            this.$refs.contactServer.open(this.ruleForm.businessId)
            this.close()
          })
      }
    },
    close(formName) {
      this.$emit('close')
      this.dialogVisible = false;
    },
  },
};
</script>
<style scoped lang="scss">
.kuaijie {
    flex-wrap: wrap;
  }
  .kuaijie-item {
    min-width: 150px;
    // width: 100%;
    // height: 49px;
    border-radius: 4px;
    border: 1px solid $yellow;
    text-align: center;
    color: $yellow;
    padding: 10px;
    margin-right: 30px;
    margin-bottom: 10px;
    cursor: pointer;
    position: relative;
    &.active {
      color: #fff;
      background-color: #ff9717;
    }
    .xs{
      background-color: #eb8200;
      width: 33px;
      height: 17px;
      font-size: 12px;
      line-height: 16px;
      position: absolute;
      top: 0;
      right: 0;
      color: #fff;
    }
  }
.center{
  text-align: center;
  margin-top: 15px;
}

</style>
